<template>
  <div>
    <div>旋转成型LatheGeometry</div>
    <div ref="webgl" id="webgl"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  onMounted(() => {
    init();
  });
  function init() {
    scene = new THREE.Scene();
    const width = 500;
    const height = 300;
    camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    webgl.value.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);
    // Vector2表示的三个点坐标，三个点构成的轮廓相当于两端直线相连接
    const pointsArr = [
      new THREE.Vector2(50, 60),
      new THREE.Vector2(25, 0),
      new THREE.Vector2(150, -60),
    ];
    // LatheGeometry：pointsArr轮廓绕y轴旋转生成几何体曲面
    // pointsArr：旋转几何体的旋转轮廓形状
    const geometry = new THREE.LatheGeometry(pointsArr, 4, 0, Math.PI * 2);
    const material = new THREE.MeshLambertMaterial({ color: 0x11ffff, side: THREE.DoubleSide });
    const materialMesh = new THREE.Mesh(geometry, material);
    scene.add(materialMesh);

    renderFun();
  }
  function renderFun() {
    render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
